<template>
    <el-form class="formRef" :model="formdata" label-width="120px">
        <el-form-item label="代码名称">
            <el-input v-model="formdata.name"></el-input>
        </el-form-item>
        <el-form-item label="代码描述">
            <el-input v-model="formdata.description"></el-input>
        </el-form-item>
        <el-form-item label="代码">
            <MonaoEditor id="monaco" :value="formdata.context" @change="change"></MonaoEditor>
        </el-form-item>
        <el-form-item v-show="error" label="代码错误">
            <pre>{{ error }}</pre>
        </el-form-item>
        <el-form-item :label="formdata.ID ? '修改' : '保存'">
            <el-button @click="submit">{{ formdata.ID ? '修改' : '保存' }}</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { asynccreateorupdatespecialjudge, asyncselectspecialjudge } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import MonaoEditor from '../../../components/MonaoEditor.vue'
const formdata = ref<Studycodemodel.Ispecialjudge>({
    name: '',
    description: '',
    context: `
#include "testlib.h"
#include <string>

using namespace std;
int main(int argc, char *argv[])
{
    /*
   * inf：输入
   * ouf：选手输出
   * ans：标准输出
   */
    registerTestlibCmd(argc, argv);
    string output = ouf.readString();
    string Answer = ans.readString();
    if(output != Answer)
        quitf(_wa, "");
    quitf(_ok, "");
}
`
})

const error = ref('')

function change(context?: string, e?: any) {
    formdata.value.context = context
    console.log(e)
}


async function submit() {
    try {
        error.value = ''
        await asynccreateorupdatespecialjudge(formdata.value)
        ElMessage.success('提交成功')
    } catch (e: any) {
        ElMessage.error('编译失败')
        error.value = e
    }
}

const route = useRoute()

async function start() {
    if (route.query.ID) {
        const data = await asyncselectspecialjudge({
            ID: route.query.ID
        })
        const [t] = data.rows
        if (t) {
            formdata.value = t
        } else {
            ElMessage.error('没有查找到')
        }
    }
}

onMounted(() => {
    start()
})

</script>


<style scoped>
.formRef {
    margin-bottom: 30px;
}

#monaco {
    border: 1px solid #ccc;
}
</style>
